<template>
	<view style="width: 100%;" >
		<nodata v-if="getlist.length==0"></nodata>
		 <mescroll-uni ref="mescrollRef"  @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" >
		<view class="department relative " v-for='item in getlist'>
			<view class="pL5 pR5">
				<uni-icons :type="item.icoclass" color="#0c8ace" size="30"></uni-icons>
			</view>
			<view class="department-name" @click="addPersonnel(item)">{{item.name}}</view>
			<!-- <view class="department-del f12"  v-if="optionschanger&&item.is_security==0">
				<view class="bg_red col_white borderr8 p4 pL20 pR20 inline-block" @click="delPersonnel(item)">
					删除
				</view>
				<view class="bg_blue col_white borderr8 p4 pL20 pR20 mL15 inline-block" @click="ModifyPersonnel(item)">
					修改
				</view>
			</view> -->
			<view class="f14 col_999 w100 tRight"  @click="addPersonnel(item)">
				修改/删除/加入员工
			</view>
			<view class=""  @click="addPersonnel(item)">
				<uni-icons type="arrowright" size="20"></uni-icons>
			</view>
			<!-- <view class="department-del f12" @click="delPersonnel(item)">修改</view> -->
		</view>
		</mescroll-uni>
		
		<view class="btnapprow bg_white">
			<view class="btn-row"><button type="primary" class="primary " @click="addprouns()">添加部门</button></view>
		</view>
		<backnext nofooter='YES'></backnext>
		<!-- 底部导航 -->
		<footernav pagePath='user'></footernav>
		<!-- 加载动画 -->
		<loading v-if="!isloading()"></loading>
	</view>
</template>

<script>
import {userinfo} from '../../common/api/user.js'; //引进requst方法
import {showgetlist,deletedept} from '../../common/api/department.js'; //引进requst方法
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			companyid:"",
			icoarr:['pengyouquan','star','spinner-cycle','navigate','map'],
			getlist:[],
			allLoaded:false,
			page:1,
			pagesize:10,
			requestchanger:true,
			downOption:{
				auto: false
			},
			upOption:{
				auto:false
			},
			optionschanger:false
		};
	},
	methods: {
		
		/*下拉刷新的回调*/
			downCallback(){
				this.page=1;
				this.loadingdata();		
			
			},
		/*上拉加载的回调*/
			upCallback(page) {
				console.log(page)
				this.mescroll.endSuccess(this.getlist.length, this.requestchanger);
				this.page++;
				this.loadingdata();	
			// 与 mescroll-body 的处理方式一致 > 
			},
			
		backRefresh(type){ //返回刷新带参数
			console.log(type)
			this.page=1;
			this.loadingdata();
		},
		
		onNavigationBarButtonTap: function(e) {
			console.log(JSON.stringify(e));
			uni.navigateTo({
				url: './addDepartment'
			});
		},
		addprouns() {
			uni.navigateTo({
				url: './addDepartment'
			});
		},
		
		addPersonnel(item){ //跳转详情页面

			let detail = {
				id: item.id,
				companyid: item.companyid,
				departname: item.name,
				is_security:item.is_security,
			};
			uni.navigateTo({
				url: './departmentPersonnel?detaildata=' + encodeURIComponent(JSON.stringify(detail))
			});
			
		},
		ModifyPersonnel(item){ //跳转修改页面
			console.log(1)
			// uni.reLaunch({
			// 	url: './departmentPersonnel'
			// });
			let detail = {
				item: item,
			};
			uni.navigateTo({
				url: './addDepartment?detaildata=' + encodeURIComponent(JSON.stringify(item))
			});
			
		},
		delPersonnel(item){ //删除接口
			if(item.is_security==1){
				uni.showToast({
				    title: '默认部门无法删除',
				    duration: 2000,
					icon:'none'
				});
				return;}
			let _that = this
			console.log(item.id)
			uni.showModal({
			    title: '确认删除此部门?',
			    // content: '这是一个模态弹窗',
			    success: function (res) {
			        if (res.confirm) {
						deletedept({id:item.id}).then(res=>{
							uni.showToast({
								icon: 'none',
								title: res.data.message,
								duration: 2000
							});
							_that.page=1;
							_that.loadingdata();
							
						})
			            // console.log('用户点击确定');
			        } else if (res.cancel) {
						/*bann*/
						return 
			            // console.log('用户点击取消');
			        }
			    }
			});
		},
		loadingdata(){ //加载列表数据
			showgetlist({companyid:this.companyid,page:this.page,pagesize:this.pagesize}).then(reslist=>{
				if(reslist.data.code==400){
					this.requestchanger = false
					return
					}
					
				console.log(reslist)
				if(reslist.data.data){
					var newResult=reslist.data.data;
					if(newResult){
						for(let i=0;i<newResult.length;i++){
							if(i<5){
								newResult[i].icoclass=this.icoarr[i]
							}else if(i>4&&i<8){
								var newi=i-4
								newResult[i].icoclass=this.icoarr[newi]
							}else{
								var newi=i-8
								newResult[i].icoclass=this.icoarr[newi]
							}
							
						}	
					}
					
					// this.getlist=reslist.data.data;
					this.mescroll.endSuccess();
					 if (newResult.length == 0 || newResult.length < 10) {
						 this.allLoaded = true;
					 }
					 if (this.page != 1) {
						 newResult = this.getlist.concat(newResult);
					 }
					 this.getlist = newResult;
				 }
			})
		}
	},
	onLoad() {
		if(this.requestchanger){
			userinfo({}).then(res=>{//获取用户信息
				console.log(res)
				this.companyid=res.data.data.companyid;
				this.loadingdata();
				/*角色控权*/
				switch(res.data.data.roleid) {
				     case 1:
						this.optionschanger = true
				        break;
					 case 2:
						this.optionschanger = true
				     default:
				        
				}
			});
		}
	},
	onPullDownRefresh() {
	//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		this.page=1;
		console.log('refresh');
		 this.getlist=[];
		this.loadingdata();
		setTimeout(function() {
			uni.stopPullDownRefresh();  //停止下拉刷新动画
		}, 1000);
	}
};
</script>

<style>
.department {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0px;
	padding: 10px 0;
	background-color: #fff;
	border-bottom: 1px solid #EEEEEE;
}
.head-pic {
	width: 57px;
	height: 57px;
	border-radius: 28px;
	background-color: rgba(40, 193, 147, 1);
}
.department-name {
	color: rgba(0, 0, 0, 1);
	font-size: 16px;
	/* margin-left: 10px; */
	width: 100%;
}
.department-del {
	color: rgba(166, 166, 166, 1);
	font-size: 16px;
	position: absolute;
	right: 20px;
	bottom: 5px;
}
.btnapprow{position: fixed;bottom: 100upx;left: 0px;width: 100%;z-index: 999;}
.btnapprow .btn-row{background: #fff;width: 80%;margin: 0 auto;padding-bottom: 10px;padding-top: 10px;}
.primary{
	background: #007aff;
}
</style>
